<template>
  <div class="app-container">
    <el-card key="deviceInfo">
      <div class="card-device-overview">
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="device-image">
              <img :src="logo" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="device-text">
              <p>设备名称：{{ deviceBasicInfo[0]?.装置名称 || "" }}</p>
              <p>版本：{{ softwareInfo[0]?.版本 || "" }}</p>
              <p>时间：{{ softwareInfo[0]?.日期 || "" }}</p>
              <p>装置标识码：{{ deviceBasicInfo[0]?.装置标识码 || "" }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-row :gutter="10" class="mt-5">
      <el-col :span="12" :xs="24" class="mb-xs-3">
        <!-- 软件信息 -->
        <el-card v-if="softwareInfo.length > 0" class="mb-4">
          <template #header>
            <div class="card-header">
              <span class="text-gray">软件版本</span>
            </div>
          </template>
          <el-table :data="softwareInfo" border style="width: 100%">
            <el-table-column prop="名称" label="名称" align="center" />
            <el-table-column prop="版本" label="版本" align="center" />
            <el-table-column prop="校验码" label="校验码" align="center" />
            <el-table-column prop="日期" label="日期" align="center" />
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12" :xs="24" class="mb-xs-3">
        <!-- getCpuInfo 硬件信息 -->
        <el-card v-if="cpuInfo.length > 0" class="mb-4">
          <template #header>
            <div class="card-header">
              <span class="text-gray">硬件版本</span>
            </div>
          </template>
          <el-table :data="cpuInfo" border style="width: 100%">
            <el-table-column prop="名称" label="名称" align="center" />
            <el-table-column prop="版本" label="版本" align="center" />
            <el-table-column prop="校验码" label="校验码" align="center" />
            <el-table-column prop="日期" label="日期" align="center" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-2">
      <el-col :span="10" :xs="24" class="mb-xs-3">
        <!-- 虚端子 -->
        <el-card v-if="virtualTerminalInfo.length > 0" class="mb-4 h-full">
          <template #header>
            <div class="card-header">
              <span class="text-gray">虚端子</span>
            </div>
          </template>
          <el-table :data="virtualTerminalInfo" border style="width: 100%">
            <el-table-column prop="名称" label="名称" align="center" />
            <el-table-column prop="版本" label="版本" align="center" />
            <el-table-column prop="校验码" label="校验码" align="center" />
            <el-table-column prop="日期" label="日期" align="center" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="mb-xs-3">
        <!-- 装置基本信息 -->
        <el-card v-if="deviceBasicInfo.length > 0" class="mb-4 h-full">
          <template #header>
            <div class="card-header">
              <span class="text-gray">装置标识码</span>
            </div>
          </template>
          <el-table :data="deviceBasicInfo" border style="width: 100%">
            <el-table-column prop="装置名称" label="装置名称" align="center" />
            <el-table-column prop="装置标识码" label="装置标识码" align="center" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24" class="mb-xs-3">
        <!-- 管理单信息 -->
        <el-card v-if="managementInfo.length > 0" class="mb-4 h-full">
          <template #header>
            <div class="card-header">
              <span class="text-gray">管理单信息</span>
            </div>
          </template>
          <el-table :data="managementInfo" border style="width: 100%">
            <el-table-column prop="管理单名称" label="管理单名称" align="center" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 测控版本 -->
    <el-card v-if="deviceDetailInfo.length > 0" class="mb-4 mt-4">
      <template #header>
        <div class="card-header">
          <span class="text-gray">测控版本</span>
        </div>
      </template>
      <el-table :data="deviceDetailInfo" border style="width: 100%">
        <el-table-column prop="装置型号" label="装置型号" align="center" />
        <el-table-column prop="装置名称" label="装置名称" align="center" />
        <el-table-column prop="软件版本" label="软件版本" align="center" />
        <el-table-column prop="程序校验码" label="程序校验码" align="center" />
        <el-table-column prop="程序日期" label="程序日期" align="center" />
        <el-table-column prop="ICD版本" label="ICD版本" align="center" />
        <el-table-column prop="ICD校验码" label="ICD校验码" align="center" />
        <el-table-column prop="CID版本" label="CID版本" align="center" />
        <el-table-column prop="CID校验码" label="CID校验码" align="center" />
        <el-table-column prop="CCD版本" label="CCD版本" align="center" />
        <el-table-column prop="CCD校验码" label="CCD校验码" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useDeviceInfoStore, useHmiConfigStore } from "@/store";
import logo from "@/assets/logo.png";

defineOptions({
  name: "HmiDeviceContentDevice",
  inheritAttrs: false,
});

const hmiConfigStore = useHmiConfigStore();
const deviceInfoStore = useDeviceInfoStore();

// 计算属性
const loading = computed(() => deviceInfoStore.loading);
const error = computed(() => deviceInfoStore.error);
/**
 *  
    getSoftwareInfo,
    getCpuInfo,
    getVirtualTerminalInfo,
    getDeviceDetailInfo,
    getDeviceBasicInfo,
    getManagementInfo,
 */
const softwareInfo = computed(() => deviceInfoStore.getSoftwareInfo());
const cpuInfo = computed(() => deviceInfoStore.getCpuInfo());
const virtualTerminalInfo = computed(() => deviceInfoStore.getVirtualTerminalInfo());
const deviceDetailInfo = computed(() => deviceInfoStore.getDeviceDetailInfo());
const deviceBasicInfo = computed(() => deviceInfoStore.getDeviceBasicInfo());
const managementInfo = computed(() => deviceInfoStore.getManagementInfo());

onMounted(() => {
  deviceInfoStore.fetchDeviceInfo();
  hmiConfigStore.initHmiConfig();
});
</script>

<style scoped>
/* .mb-4 {
  margin-bottom: 16px;
} */

/* .card-no-padding {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
  padding-right: 0px;
  
  :deep(.el-card__header) {
    padding: 0px;
  }

  :deep(.el-card__body) {
    padding: 0px;
  }
} */

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-device-overview {
  .device-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    img {
      width: auto;
      height: auto;
      max-width: 150px;
      max-height: 150px;
      object-fit: contain;
    }
  }

  .device-text {
    font-size: 14px;
    color: #333;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.error-container {
  padding: 10px;
}
</style>
